<template>
  <div id="picture-upload">
    <h2>图片上传</h2>
    <div class="picture-upload-content">
      <a-image 
        v-if="uploadImageUrl"
        :src="uploadImageUrl" 
        alt="图片预览" 
        style="width: 200px; height: 200px; object-fit: cover; border-radius: 10px;border: 1px solid #d9d9d9;" 
        :fallback="errorImage"
        fit="cover"
      />
      <a-upload
        v-else
        name="image"
        class="picture-uploader"
        :before-upload="beforeImageUploadFunction"
        :customRequest="handleImageUpload"
        :show-upload-list="false"
      >
        <div class="picture-uploader-button">
          <div>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
          </div>
          <div class="ant-upload-text">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Upload
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
        </div>
      </a-upload>
    </div>
    <div class="picture-upload-input" v-if="uploadImageUrl">
      <a-input class="picture-upload-input-input" v-model:value="uploadImageUrl"/>
      <a-button class="picture-upload-input-button" type="primary" @click="copyImageUrl">
        复制
      </a-button>
      <a-button class="picture-upload-clear-button" type="primary" danger @click="clearImageUrl">
        清除
      </a-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { uploadImage, beforeImageUpload } from '@/api/utils';
import { message } from 'ant-design-vue';
import { PlusOutlined, LoadingOutlined  } from '@ant-design/icons-vue';

const uploadImageUrl = ref('');
const errorImage = "";
const loading = ref(false);
const beforeImageUploadFunction = (file) => {
  return beforeImageUpload(file);
};

const handleImageUpload = async (file) => {
  loading.value = true;
  const res = await uploadImage(file);
  if (res) {
    uploadImageUrl.value = res;
    message.success('图片上传成功');
    loading.value = false;
  } else {
    message.error('上传失败');
    loading.value = false;
  }
};  

const copyImageUrl = () => {
  navigator.clipboard.writeText(uploadImageUrl.value);
  message.success('复制成功');
};

const clearImageUrl = () => {
  uploadImageUrl.value = '';
  message.success('清除成功');
};
</script>

<style scoped>
#picture-upload {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.picture-upload-content {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picture-uploader {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 1px dashed #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.picture-uploader-button {
  width: 100%;
  height: 100%;
}

.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.picture-upload-input {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
}

.picture-upload-input-input {
  flex: 1;
}

.picture-upload-input-button {
  margin: 0 10px;
}

</style>
